<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人月度统计</title>
    <style>
        #chart {
            width: 1000px;
            height: 600px;
            margin: 30px auto;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        h2 {
            text-align: center;
            margin-top: 30px;
            color: #333;
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 24px;
        }
        .chart-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
        }
    </style>
</head>
<body>

<h2>联系人月度新增数量趋势分析</h2>
<div class="chart-container">
    <div id="chart"></div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    /*<![CDATA[*/
    const months = [[${months}]];
    const counts = [[${counts}]];

    // 计算平均值
    const average = counts.reduce((a, b) => a + b, 0) / counts.length;

    // 准备标记点数据（最高点和最低点）
    const maxValue = Math.max(...counts);
    const minValue = Math.min(...counts);
    const markPointData = [];
    const markLineData = [];

    counts.forEach((value, index) => {
        if(value === maxValue) {
            markPointData.push({
                name: '峰值',
                value: value,
                xAxis: index,
                yAxis: value,
                itemStyle: { color: '#FF0066' }
            });
        }
        if(value === minValue) {
            markPointData.push({
                name: '谷值',
                value: value,
                xAxis: index,
                yAxis: value,
                itemStyle: { color: '#00CC99' }
            });
        }
    });

    markLineData.push({
        name: '平均值',
        type: 'average',
        lineStyle: {
            color: '#FF9900',
            type: 'dashed'
        },
        label: {
            position: 'end',
            formatter: '平均: {c}'
        }
    });

    const chart = echarts.init(document.getElementById('chart'));

    const option = {
        title: {
            text: '月度联系人增长趋势',
            subtext: '数据分析报告',
            left: 'center',
            textStyle: {
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333'
            },
            subtextStyle: {
                color: '#666'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            formatter: function(params) {
                return `<strong>${params[0].name}</strong><br/>
                        新增数量: <span style="color:#5470C6;font-weight:bold">${params[0].value}</span><br/>
                        占比: <span style="color:#EE6666;font-weight:bold">${(params[0].value/counts.reduce((a,b)=>a+b)*100).toFixed(1)}%</span>`;
            }
        },
        legend: {
            data: ['新增联系人'],
            right: 20,
            top: 20
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {
                    title: '保存为图片',
                    pixelRatio: 2
                },
                dataView: {
                    title: '数据视图',
                    readOnly: true,
                    lang: ['数据视图', '关闭', '刷新']
                },
                magicType: {
                    title: {
                        line: '切换为折线图',
                        bar: '切换为柱状图'
                    },
                    type: ['line', 'bar']
                },
                restore: {
                    title: '还原'
                }
            },
            right: 30,
            top: 20
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: months,
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666',
                rotate: 30
            }
        },
        yAxis: {
            type: 'value',
            name: '新增数量',
            nameLocation: 'middle',
            nameGap: 30,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666',
                formatter: '{value}'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#eee'
                }
            }
        },
        series: [{
            name: '新增联系人数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            data: counts,
            itemStyle: {
                color: '#5470C6',
                borderWidth: 2,
                borderColor: '#fff'
            },
            lineStyle: {
                width: 3,
                color: '#5470C6'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(84,112,198,0.5)' },
                    { offset: 1, color: 'rgba(84,112,198,0.1)' }
                ])
            },
            label: {
                show: true,
                position: 'top',
                color: '#5470C6',
                fontWeight: 'bold',
                formatter: function(params) {
                    return params.value > average ? '{c}' : '';
                }
            },
            markPoint: {
                data: markPointData,
                label: {
                    color: '#fff',
                    fontWeight: 'bold',
                    formatter: function(params) {
                        return params.name + '\n' + params.value;
                    }
                },
                symbolSize: 40
            },
            markLine: {
                silent: true,
                data: markLineData,
                symbol: 'none',
                label: {
                    position: 'end',
                    color: '#FF9900',
                    fontWeight: 'bold'
                }
            },
            emphasis: {
                itemStyle: {
                    color: '#FF0066',
                    borderColor: '#fff',
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: 'rgba(255,0,102,0.3)'
                }
            }
        }],
        dataZoom: [{
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 100,
            height: 20,
            bottom: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }]
    };

    chart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function() {
        chart.resize();
    });
    /*]]>*/
</script>

</body>
</html>